/**
 * breadcrumb 面包屑
    constList 列表
    url 上一篇|下一篇地址
    backUrl 返回地址
 */
import React from 'react'
import { withRouter, Link } from 'react-router-dom'

import qs from 'querystringify'
import Breadcrumb from '@components/Breadcrumb'
import './index.less'
class CusDetail extends React.Component{
    constructor(props) {
        super(props)
    }

    jumpTo = (index, type) => {
        return <div className="click-css" onClick={()=>{
            this.props.history.push({
                pathname: this.props.url,
                search: `id=${this.props.constList[index]?.id}`
            })
        }}>{type}：{this.props.constList[index]?.title}</div>
    }

    render() {
        let id = ''
        if (!!this.props.location.search) {
            id = qs.parse(this.props.location.search.slice(1)).id
        }else {
            return
        }
        let currentIndex
        let data = this.props.constList.filter((item, index) => {
            if (item.id == id) {
                currentIndex = index
                return true
            }
        })
        if (!!data && data.length >0) {
            data = data[0]
        } else {
            return
        }
        return (
            <div id="cus-detail">
                <Breadcrumb arr={this.props.breadcrumb}/>
                <main style={{marginTop: '60px', color: '#fff'}}>
                    <h2>{!!data.detailTitle ? data.detailTitle : data.title}</h2>
                    <h3>{data.detailDesc}</h3>
                    {/* <h3>{data.detailDesc}</h3> */}
                    {/* {
                        !!data.desc && <h3>{data.desc}</h3>
                    } */}
                    {
                        data.detail.map((item, index) => (
                            <p key={index} dangerouslySetInnerHTML={{__html:item}}/>
                        ))
                    }
                    {
                        currentIndex < this.props.constList.length - 1
                        && this.jumpTo(currentIndex + 1, '[下一篇]')
                    }
                    {
                        currentIndex > 0
                        && this.jumpTo(currentIndex - 1, '[上一篇]')
                    }
                    <div className="click-css" onClick={()=>{
                        this.props.history.push(this.props.backUrl)
                    }}>[返回列表]</div>
                </main>
            </div>
        )
    }
}
export default withRouter(CusDetail)